<template>
    <div class="repair-order-lists">
        <el-card class="!border-none" shadow="never">
            <el-form ref="formRef" class="mb-[-16px]" :model="queryParams" :inline="true">
                <div>
                    <company-select 
                        @select-company="handleSelectCompany"
                        label="选择公司"
                        custom-class="w-[192px]"
                    />
                    <el-form-item label="选择文件">
                        <el-select v-model="queryParams.p_id" 
                        class="w-[192px]" 
                        filterable
                        clearable>
                            <el-option label="全部" value="" />
                            <el-option 
                                v-for="item in filteredFileList" 
                                :key="item.id" 
                                :label="item.name" 
                                :value="item.id" 
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="状态">
                        <el-select v-model="queryParams.status" class="w-[192px]" clearable>
                            <el-option label="全部" value="" />
                            <el-option label="已执行" value="1" />
                        </el-select>
                    </el-form-item>
                </div>
                <div>
                    <el-form-item label="开始时间" style="width: 260px;">
                        <el-date-picker
                            v-model="queryParams.start_time"
                            type="date"
                            class="w-[180px]"
                            value-format="YYYY-MM-DD"
                            clearable
                        />
                    </el-form-item>
                    <el-form-item label="结束时间" style="width: 260px;">
                        <el-date-picker
                            v-model="queryParams.end_time"
                            type="date"
                            class="w-[180px]"
                            value-format="YYYY-MM-DD"
                            clearable
                        />
                    </el-form-item>
                </div>
                
                <el-form-item>
                    <el-button type="primary" @click="getLists">查询</el-button>
                    <el-button @click="resetParams">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card class="!border-none mt-4" shadow="never">
            <div>
                <el-table
                    ref="tableRef"
                    class="mt-4"
                    size="large"
                    v-loading="pager.loading"
                    :data="pager.lists"
                >
                    <el-table-column label="订单信息" min-width="220">
                        <template #default="{ row }">
                            <div>公司名称: {{ row.company.company_name }}</div>
                            <div>订单编号: {{ row.order_num }}</div>
                            <!-- <div>订单状态: {{ getOrderStatusText(row.status) }}</div> -->
                            <!-- <div>订单距离: {{ Math.ceil(row.extend.driver_mile / 1000) }} 公里</div> -->
                            <div>订单金额: {{ row.price }}元</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="司机信息" min-width="210">
                        <template #default="{ row }">
                            <div>司机姓名: {{ row.driver_name }}</div>
                            <!-- <div>司机电话: {{ row.driver_phone }}</div> -->
                            <div>车牌号: {{ row["repair_order"]?.["driver"]["car"]["vehicle_no"] }}</div>
                            <div>驾驶证号: {{ row["repair_order"]?.["driver"]["license"] }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="订单时间" min-width="220">
                        <template #default="{ row }">
                            <div>下单时间: {{ row.place_time }}</div>
                            <div>用车时间: {{ row.book_time }}</div>
                            <div>匹配时间: {{ row.distribute_time }}</div>
                            <div>出发时间: {{ row.depart_time }}</div>
                            <div>到达时间: {{ row.arrive_time }}</div>
                            <div>支付时间: {{ row.pay_time }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="地址信息" min-width="200">
                        <template #default="{ row }">
                            <div>出发地址: {{ row.departure }}</div>
                            <div>目的地址: {{ row.destination }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="上传结果" min-width="180">
                        <template  #default="{ row }">
                            <div v-if="row.excel">
                                <div>上传文件: {{ row["excel"]?.["name"] }}</div>
                                <div>上传时间: {{ row.created_at_str }}</div>
                                <div>上传结果: {{ row.status_str }}</div>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="flex justify-end mt-4">
                <pagination v-model="pager" @change="getLists" />
            </div>
        </el-card>
    </div>
</template>

<script lang="ts" setup name="repairOrder">
import CompanySelect from '@/components/company-select/index.vue'
import type { ElTable, FormInstance } from 'element-plus'
import feedback from '@/utils/feedback'
import { usePaging } from '@/hooks/usePaging'
import { orderLists, files} from '@/api/supervise/repair-order'

const tableRef = shallowRef<InstanceType<typeof ElTable>>()
const formRef = shallowRef<FormInstance>()


const formatDate = (date: Date) => {
    const year = date.getFullYear()
    const month = String(date.getMonth() + 1).padStart(2, '0')
    const day = String(date.getDate()).padStart(2, '0')
    return `${year}-${month}-${day}`
}

const queryParams = reactive({
    p_id: '',
    company_id: '',
    status: '',
    start_time: formatDate(new Date(Date.now() - 7 * 24 * 60 * 60 * 1000)), // 一周前的日期，格式：YYYY-MM-DD
    end_time: formatDate(new Date())+' 23:59:59' // 当前日期，格式：YYYY-MM-DD
})

const { pager, getLists, resetParams } = usePaging({
    fetchFun: orderLists, // 需要替换为实际的API函数
    params: queryParams,
})


const handleSelectCompany = async (companyId: any) => {
    queryParams.company_id = companyId
    // 重置文件选择
    queryParams.p_id = '';
    await getFileList(companyId)
}

const fileList = ref([])

const getFileList = async (companyId?: string) => {
    try {
        const res = await files({ company_id: companyId })
        fileList.value = res || []
    } catch (error) {
        console.error(error)
    }
}

const filteredFileList = computed(() => {
    if (!Array.isArray(fileList.value)) {
        return []
    }
    return fileList.value
})

onMounted(() => {
    getLists()
})
</script>